// import { connect } from 'react-redux'
import React, {useEffect, useState, Component} from 'react'
import {testHooks} from '@/store/action'
import store from '@/store';
const {dispatch, subscribe, getState} = store;

// export default function TestSubscribe() {
//   console.log(111, '组件刷新了');
//   const { count: initCount } = getState();
//   const [count, setCount] = useState(initCount);
//   let listeners = null;

//   // hooks
//   useEffect(() => {
//     listeners = subscribe(() => {
//       return setCount(() => {
//         const {count} = getState()
//         return count
//       })
//     });
//     return () => listeners
//   }, [count]);

//   const handleOnClick = () => {
//     dispatch(testHooks())
//   }

//   return (
    // <div style={{width: '300px', height: '200px', border: '1px solid #000'}}>
    //   <div>
    //     <button onClick={handleOnClick}>+1</button>
    //   </div>
    //   <div>
    //     测试链接到的store
    //     {count && <div>{count}</div>}
    //   </div>
    // </div>
//   )
// }

export default class TestSubscribe extends Component {
  state = {
    count: null
  }

  componentDidMount(){
    this.listeners = subscribe(() => {
      return this.setState((state) => {
        const {count} = getState();
        return {...state, count};
      })
    });
  };

  componentWillUnmount() {
    this.listeners()
  };

  handleOnClick = () => {
    dispatch(testHooks());
  };

  render() {
    return (
      <div style={{width: '300px', height: '200px', border: '1px solid #000'}}>
        <div>
          <button onClick={this.handleOnClick}>+1</button>
        </div>
        <div>
          测试链接到的store
          {this.state.count && <div>{this.state.count}</div>}
        </div>
      </div>
    )
  }
}

// export default connect()(TestSubscribe)

